Description of the Problem

Badge colors, including hover states, are currently composed using varying opacity, such as bg-amber-100 dark:bg-amber-300/6 [button]:hover:bg-amber-200/70 dark:[button]:hover:bg-amber-200/9

This creates the desired variation when the badges are on a plain background, such as the white background of light mode or the dark grey background in dark mode.

There are a couple of problems with this approach, though:

1. If we ever want to position badges on top of something, their transparency causes issues. You can see this here: [6.x] Flickering buttons with "Set Alt" over image #13558. The badges are less legible, and hovering over the badge reduces the legibility even further
2. The badges would also appear inconsistent when the CP is themed. The predictable white/dark grey background of the default Statamic CP theme can no longer be relied on.

What this PR Does

• This PR replaces all the transparent values with opaque values from the Tailwind color scale.
• The badges are now a touch lighter in appearance as a side effect, but this actually gives them a better contrast score for accessibility.
• I've improved a couple of dark badge colours, which were off.

I also added some extra tests for cp/playground while I was here.

Before

After

How to Reproduce

1. The easiest thing to do is go to cp/playground and check out #f9c5d171a246a7c49602b465e5fc8f88d926117e (before), where I've added a playground demo, then check out the latest commit on this branch.